<template>
	<view class="st-swiper-container">
		<swiper class="st-swiper" :autoplay="autoplay" :duration="200" @change="swiperChange" :style="{height: imgHeight + 'px', borderRadius: imgRadius + 'px'}">
			<swiper-item v-for="(item,index) in swiperList" :key="index">
				<image 
				:src="item.adsrc" 
				mode="aspectFill" 
				:style="{height: imgHeight + 'px', borderRadius: imgRadius + 'px'}" 
				@click="toAds(item)"></image>
			</swiper-item>
		</swiper>
		<view class="st-indicator-dots" :style="{justifyContent: align ,bottom: marginBottom + 'px'}">
			<view 
				v-for="(item, index) in swiperList"
			    :class="['item', swiperActive === index ? 'active' : '']"
			    :key="index"></view>
		</view>
	</view>
</template>

<script>
	/**
	 * stSwiper 轮播切换
	 * @description 广告位展示
	 * @author xuqiang 2023-11-08
	 * @property {Array} swiperList 图片数据
	 * @property {Boolean} autoplay 是否自动切换
	 * @property {Number} duration 滑动动画时长
	 * @property {Number} imgHeight 图片高度
	 * @property {Number} imgRadius 图片圆角
	 * @property {String} align 指示点横向显示位置
	 * @property {Number} marginBottom 指示点纵向显示位置
	 */
	import {adsPath} from '@/utils/ads.js'
	export default {
		name:"st-swiper",
		props: {
			swiperList: {
				type: Array,
				default(){
					return []
				}
			},
			autoplay: {
				type: Boolean,
				default: false
			},
			duration: {
				type: Number,
				default: 200
			},
			imgHeight: {
				type: Number,
				default: 140
			},
			imgRadius: {
				type: Number,
				default: 0
			},
			align: {
				type: String,
				default: 'flex-end'
			},
			marginBottom:{
				type: Number,
				default: 12
			}
		},
		data() {
			return {
				swiperActive: 0
			};
		},
		methods: {
			// 切换swiper
			swiperChange({ detail: { current } }) {
			    this.swiperActive = current
			},
			// 前往广告位的页面
			toAds({adtype, typeid, proid, adlink, adname}) {
				adsPath(adtype, typeid, proid, adlink, adname)
			},
		}
	}
</script>

<style lang="scss" scoped>
.st-swiper-container{
	width: 100%;
	box-sizing: border-box;
	position: relative;
	.st-swiper,
	image{
		width: 100%;
		height: 400rpx;
	}
	.st-indicator-dots{
		display: flex;
		justify-content: flex-end;
		padding: 0 24rpx;
		position: absolute;
		left: 0;
		width: 100%;
		box-sizing: border-box;
		.item {
			width: 16rpx;
			height: 16rpx;
			margin: 0 6rpx;
			border-radius: 50%;
			background: rgba(255, 255, 255, 0.5);
			&.active {
				background: #fff;
			}
		}
	}
}

</style>